<template>
	<u-popup v-model="show" close-icon-color="#ffffff" mode="center" @close="cancel" :closeable="true"
		:mask-close-able="false" :border-radius="16">
		<view class="slot-content">
			<image src="/static/popup_bg.png" width="100%" mode="widthFix"></image>
			<view class="slot-content-list">
				<!-- <view class="slot-content-item advertising" v-if="times <= 0">
					<view class="info">
						<text>超清无水印下载</text>
						<text class="tips">每日免费剩余<text style="color:red">{{times}}</text>次</text>
					</view>
					<view class="ad btn" @tap="callAdvertising">看广告下载</view>
				</view> -->

				<view class="slot-content-item">
					<view class="info">
						<text>原图无水印下载</text>
						<view class="tips">
						<!-- 	<text class="times">每日免费剩余<text style="color:red">{{times}}</text>次</text> -->
							<text class="price">￥{{vk.pubfn.priceFilter(price)}}/张</text>
						</view>
					</view>

					<view class="pay btn" @tap="pay" v-if="times <= 0">购买原图</view>
					<view class="pay btn" @tap="freeSuccess" v-else>免费下载</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import { ref, watch, defineProps, defineEmits, nextTick, onMounted } from 'vue';
	
	const freeTotalTimes = 0;

	const vk = uni.vk;

	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		price: {
			type: Number,
			default: 999999
		},
		templateId: {
			type: String,
			default: ''
		},
	})
	
	type  EmitsType = "advertising" | "pay" | "cancel" | "success";
	
	const emits = defineEmits(['advertising', 'pay', 'cancel', 'success']);

	const show = ref(false);

	watch(() => props.visible, (value : boolean) => {
		show.value = value;
	})
	
	const key = vk.myfn.HmUtils.Interceptors.getDateKey();
	
	const times = ref(0);
	
	const init = async () => {
		try {
			const time = Date.now() - 24 * 60 * 60 * 1000;
			const date = new Date(time);
			const yestodayKey = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate();
			uni.removeStorage({key: yestodayKey});
		} catch (error) {
			// 清除昨天的缓存
		}
		// 每日免费拦截
		const markData = uni.getStorageSync(key) || 0;
		times.value = freeTotalTimes - markData;
	}
	
	onMounted(init);
	
	const freeSuccess = () => {
		const markData = uni.getStorageSync(key);
		let t = markData || 0;
		uni.setStorageSync(key, t + 1);
		times.value = freeTotalTimes - (t + 1);
		emits('success')
	}

	const cancel = () => {
		emits('cancel');
	}
	
	const onBtnClick = async (e: EmitsType) => {
		const markData = uni.getStorageSync(key);
		if ((markData && markData >= freeTotalTimes) || !freeTotalTimes) {
			emits(e);
		} else {
			freeSuccess();
		}
	}

	// const callAdvertising = () => {
	// 	onBtnClick('advertising');
	// }

	const pay = () => {
		onBtnClick('pay');
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		position: relative;
		background: transparent;

		.slot-content-list {
			background: #ffffff;
			padding: 20rpx 10rpx;
			display: flex;
			flex-direction: column;

			.slot-content-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 10rpx;

				.info {
					font-weight: bold;
					display: flex;
					flex-direction: column;

					.tips {
						font-weight: normal;
						font-size: 22rpx;
						color: #969696;
						
						.price {
              color: #FF6A60;
							
						}
						
						.times {
							
						}
					}
				}

				.btn {
					border-radius: 20rpx;
					width: 200rpx;
					text-align: center;
					font-size: 28rpx;
					background: linear-gradient(#b0b8ff, #5665eb);
					color: #ffffff;
					padding: 10rpx 0;
					z-index: 1;
				}

				.pay {
					background: linear-gradient(#5a5a5a, #2a2a2a);
					color: #e9e3cc;
				}
			}

			.advertising {
				position: relative;

				&::after {
					content: ' ';
					position: absolute;
					top: 0;
					left: 0;
					width: 200%;
					height: 200%;
					border-bottom: 1px solid #dddddd;
					transform: scale(0.5);
					transform-origin: 0 0;
					z-index: 0;
				}
			}
		}
	}
</style>